import Popup from "@/components/com/Popup";
import { ComUtils } from "@/utils/Com";
import { createSignal, For, Show } from "solid-js";
import HtlmTemplat from "./HtlmTemplat";
import { MessageBox } from "@/utils/messagebox";
interface Props {
    show: () => boolean
    data: () => ProjectItem
    close?: () => void
    save?: (data: ProjectItem) => void
}
const Fields = ['key', 'opreation']
const newIcon = ComUtils.getResourceUrl('/icons/new.svg')
const delIcon = ComUtils.getResourceUrl('/icons/delete.svg')
const htmlIcon = ComUtils.getResourceUrl('/icons/html.svg')
export default function (props: Props) {
    const [deletePopup, setDeletePopup] = createSignal(false)
    const [currentKey, setCurrentKey] = createSignal('')
    const [htmlPopup, setHtmlPopup] = createSignal(false)

    const getValue = (k: string) => {
        const data = props.data().templates
        if (!data) {
            return '-'
        }
        return Reflect.get(data, k)
    }

    const getList = () => {
        const data = props.data().templates
        if (!data) {
            return []
        }
        const keys = Object.keys(data)
        return keys
    }

    const showHtml = (key: string) => {
        setCurrentKey(key)
        setHtmlPopup(true)
    }

    const saveHtml = (html: string) => {
        const data = props.data()
        if(data.external === true){
            return
        }
        data.templates[currentKey()] = html
        props.save?.(data)
    }

    const showDelete = (key: string) => {
        setCurrentKey(key)
        setDeletePopup(true)
    }

    const addTemplate = () => {
        const key = window.prompt(ComUtils.tr('add_template'))
        if (!key || key?.trim() === '') {
            return
        } else if (!/^[a-zA-Z0-9]+$/.test(key)) {
            MessageBox.warning(ComUtils.tr('text_format_error'))
            return
        }
        const data = props.data()
        if (!data.templates) {
            data.templates = {}
        }
        data.templates[key] = ''
        props.save?.(data)
    }

    const deleteTemplate = async () => {
        const data = props.data()
        delete data.templates[currentKey()]
        props.save?.(data)
        setDeletePopup(false)
    }

    return <>
        <Popup title={ComUtils.tr('template')} show={props.show} close={props.close} ok={props.close}>
            <div class="flex justify-end items-center gap-6">
                <button onclick={addTemplate}>
                    <img class='w-6 h-6' src={newIcon} alt="newIcon" />
                </button>
            </div>
            <table class="table w-full text-center">
                <thead>
                    <tr>
                        <For each={Fields}>{field => <th>{ComUtils.tr(field)}</th>}</For>
                    </tr>
                </thead>
                <tbody class="text-[#d3d3d3]">
                    <For each={getList()}>
                        {
                            key => <tr>
                                <td>
                                    {key}
                                </td>
                                <td>
                                    <div class="flex gap-3 justify-center">
                                        <Show when={props.data().external !== true}>
                                            <button title={ComUtils.tr('delete')} onclick={() => showDelete(key)}>
                                                <img class="w-5 h-5" src={delIcon} alt="delete" />
                                            </button>
                                        </Show>
                                        <button title={ComUtils.tr('template')} onclick={() => showHtml(key)}>
                                            <img class="w-5 h-5" src={htmlIcon} alt="htmlIcon" />
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        }
                    </For>
                </tbody>
            </table>
            <Show when={getList().length === 0}>
                <p class=" text-center text-gray-600 mt-8 text-xl">
                    {ComUtils.tr('no_data')}
                </p>
            </Show>
        </Popup>
        <Popup show={deletePopup} title={ComUtils.tr('warning')} close={() => setDeletePopup(false)} ok={deleteTemplate}>
            <h3>{ComUtils.tr('delete_warn_msg')}</h3>
        </Popup>
        <Show when={htmlPopup()}>
            <HtlmTemplat content={() => getValue(currentKey())} close={() => setHtmlPopup(false)} save={saveHtml} />
        </Show>
    </>
}